<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Video Animation - Pure CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="scroll-container">
        <!-- Intro Section -->
        <section class="intro-section">
            <div class="intro-content">
                <h1 class="title">Scroll to Explore</h1>
                <p class="subtitle">Experience the journey through pure CSS magic</p>
                <div class="scroll-indicator">
                    <div class="mouse">
                        <div class="wheel"></div>
                    </div>
                    <p>Scroll Down</p>
                </div>
            </div>
        </section>

        <!-- Video Section -->
        <section class="video-section">
            <div class="video-wrapper">
                <div class="video-overlay"></div>
                <video class="scroll-video" autoplay muted loop playsinline>
                    <source src="14393454_1080_1920_60fps.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
                <div class="video-frame"></div>
            </div>
            
            <div class="content-overlay">
                <h2>Cinematic Journey</h2>
                <p>Watch as the scene unfolds with your scroll</p>
            </div>
        </section>

        <!-- Description Section -->
        <section class="description-section">
            <div class="description-content">
                <h2>Pure CSS Scroll Animation</h2>
                <p>This interactive experience uses only HTML and CSS - no JavaScript required.</p>
                <div class="features">
                    <div class="feature-card">
                        <div class="feature-icon">🎬</div>
                        <h3>Scroll-Driven</h3>
                        <p>Video scales and reveals as you scroll</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">✨</div>
                        <h3>Smooth Transitions</h3>
                        <p>Elegant CSS animations throughout</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">🎨</div>
                        <h3>Modern Design</h3>
                        <p>Clean, contemporary aesthetics</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Footer Section -->
        <section class="footer-section">
            <div class="footer-content">
                <h3>You Don't Need JavaScript</h3>
                <p>Pure CSS can create amazing interactive experiences</p>
                <div class="social-links">
                    <a href="https://github.com/CodeByDeepankar" class="social-link">GitHub</a>
                    <a href="https://x.com/CodeByDeepankar" class="social-link">Twitter</a>
                    <a href="https://linkedin.com/in/deepankarsahoo" class="social-link">LinkedIn</a>
                </div>
            </div>
        </section>
    </div>
</body>
</html>
